<template>
	<!-- 校园广场 -->
  <view class="content">
    <view class="swiper" hover-class="swiper-hover">
      <uSwiper
          height="310"
          :list="list"
          :effect3d="true"
          :indicatorPos="'bottomCenter'"
      />
    </view>
    <view id="tab"
          :class="menuFixed?'tab-select-top':''"
          class="tab-select"
          :style="'top:'+barHeight+'px;'"
    >
      <view class="tab-select-item"
            v-for="(item,index) in tabList"
            :key="index"
            @click="tabChange(index)"
            :class="tabIndex === index?'tab-select-item-active':''"
      >
        {{item}}
      </view>
      <view class="tab-select-select">==</view>
    </view>
    <view class="content-list"
          :style="isLoading?'display:flex;justify-content: center;align-items: center;height:300rpx;position:relative':''"
    >
        <Loading v-if="isLoading" ></Loading>
      <view
          :class="tabLoad?'tabCard':''"
          v-show="!isLoading"
      >
        <view
            v-if="!isLoading"
            v-for="(item,index) in dataList" :key="index">
          <tabCard
              :cardData="item"
              :cardStyle="'margin-top:30rpx'"
          />
        </view>
      </view>
    </view>
    <!--悬浮按钮-->
    <view class="suspension">
      <view @click="backTop" v-if="menuFixed">
        <image class="back-top" src="../../static/Square/back-top.png" />
      </view>
      <view @click="showPublish">
        <image class="publish" src="../../static/Square/publish.png" />
      </view>
    </view>
    <!-- 发布弹窗 -->
    <view class="publish-pop-body">
      <view class="publish-button"
            :style="'bottom:'+$store.state.tabBarHeight+'px'"
            v-show="publish">
        <view class="publish-button-list" >
          <view class="iconfont icon-yingyangke">
            <text style="font-size: 32rpx">随便说点</text>
          </view>
          <view class="iconfont icon-tixing">
            <text style="font-size: 32rpx">学习打卡</text>
          </view>
          <view class="iconfont icon-xihuan">
            <text style="font-size: 32rpx">表白交友</text>
          </view>
        </view>
        <view class="publish-button-close">
          <image src="../../static/Square/close.png" @click="closePublish" />
        </view>
      </view>
      <!--      模态层-->
      <view
          @click="closePublish"
          class="publish-model" v-show="publish"></view>
    </view>
  </view>
</template>

<script>
  import uSwiper from "uview-ui/components/u-swiper/u-swiper.vue";
  import tabCard from "@/pages/Square/components/tabCard";
  import Loading from "@/components/Loading";
  export default {
    components:{
      uSwiper,
      tabCard,
      Loading
    },
    data() {
      return {
        list: [{
          image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
          title: '昨夜星辰昨夜风，画楼西畔桂堂东'
        },
          {
            image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
            title: '身无彩凤双飞翼，心有灵犀一点通'
          },
          {
            image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
            title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
          }
        ],
        tabList:["全部动态","随便说点","学习打卡","表白交友"],
        tabIndex:0,
        menuTop:0,
        menuFixed:false,
        publish:false,
        barHeight:0,
        // tabBarHeight:0,
        dataList:[],
        isLoading:false,
        tabLoad:false
      }
    },
    mounted(){

      switch(uni.getSystemInfoSync().platform){
        case 'android':
          this.$store.state.barHeight = document.getElementsByClassName('uni-page-head')[0].offsetHeight;
          this.$store.state.tabBarHeight = document.getElementsByClassName('uni-tabbar')[0].offsetHeight;
          break;
        case 'ios':
          this.$store.state.barHeight = document.getElementsByClassName('uni-page-head')[0].offsetHeight;
          this.$store.state.tabBarHeight = document.getElementsByClassName('uni-tabbar')[0].offsetHeight;
          break;
        default:
          console.log('运行在开发者工具上')
          break;
      }
      const query = uni.createSelectorQuery().in(this);
      query.select('.tab-select').boundingClientRect(data => {
        this.menuTop = data.top;
      }).exec();
      if(uni.getSystemInfoSync().platform!=='default'){
        console.log(this.$store.state.tabbbarHeight+"default")
        this.barHeight = this.$store.state.barHeight;
      }
    },
    watch:{

    },
    methods:{
      //标签切换
      tabChange(index){
        this.tabIndex = index;
        switch (Number(index)){
          case 0:
            console.log(this.tabList[index]);
            break;
          case 1:
              console.log(this.tabList[index]);
              this.isLoading = true;
              this.getData();
              break;
          case 2:
            console.log(this.tabList[index]);
            break;
          case 3:
            console.log(this.tabList[index]);
            break;
            default:
              console.log("无");
        }
      },
      getData(){
        let that  = this;
        // uni.request({
        //   url: 'http://localhost:31010/Square/getAllList', //仅为示例，并非真实接口地址。
        //   success: (res) => {
        //     console.log(res.data);
        //     that.dataList = res.data;
        //     that.isLoading = false;
        //     that.tabLoad = true;
        //     console.log(that.tabLoad )
        //     setTimeout(()=>{
        //       that.tabLoad = false;
        //     },1000)
        //   }
        // });
        return new Promise((resolve, reject)=>{
          setTimeout(()=>{
            that.dataList = [
              {
                name:"asds",
                headImg:"",
                sex:0, //0男 1女
                time:"今天10:11",
                content:"dasdasdaa阿打算打算打啊说点阿萨德爱上大爱上打算大萨达啊打算打打ad阿萨德啊实打实大打算爱上点餐阿萨德爱上爱上打算打算打算打打算爱上打算打算的",
                imgList:["1","2","3","3","3"],
                pointLike:false
              },
              {
                name:"sdg",
                headImg:"",
                sex:1, //0男 1女
                time:"今天10:11",
                content:"dasdasdaa阿打算打算打啊说点阿萨德爱上大爱上打算大萨达啊打算打打ad阿萨德啊实打实大打算爱上点餐阿萨德爱上爱上打算打算打算打打算爱上打算打算的",
                imgList:["1","2","3","3","3"],
                pointLike:true
              }
            ];
            that.isLoading = false;
            that.tabLoad = true;
            console.log(that.tabLoad )
            setTimeout(()=>{
              that.tabLoad = false;
            },1000)
            // resolve();
          },2000)
        })
      },
      //回到顶部
      backTop(e) { // 一键回到顶部
        if (uni.pageScrollTo) {
          uni.pageScrollTo({
            scrollTop: 0
          })
        }
      },
      showPublish(){
        this.publish = true;
      },
      closePublish(){
        this.publish = false;
      }
    },
    // 2.监听页面滚动距离scrollTop
    onPageScroll: function(e) {
      this.menuFixed = e.scrollTop > this.menuTop;
    },
	}
</script>

<style lang="scss">
  .content{
    min-height: 100vh;
    background: #F1F1F1;
    position: relative;
    .tab-select-top{
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 200;
    }

    //轮播图
    .swiper{
      height: 360rpx;
      position: relative;
      /deep/ .u-swiper-wrap{
        overflow: unset;
      }
      /deep/ .u-indicator-item-round-active{
        width: 34rpx !important;
        background-color: #0081FF !important;
      }
      /deep/ .u-indicator-item-round{
        background-color: #C7CED2;
        width: 11rpx;
        height: 11rpx;
      }
      /deep/ .u-swiper-indicator{
        z-index: 200;
        bottom: -40rpx !important;
        position: absolute;
      }
    }
    //顶部选项卡
    .tab-select{
      display: flex;
      align-items: center;
      height: 90rpx;
      background-color: #ffffff;
      .tab-select-item{
        flex: 1;
        height: 100%;
        //line-height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #6F6F6F;
        font-size: 32rpx;

      }
      .tab-select-item-active{
        color: #F37B1D;
        border-bottom: 3rpx solid #F37B1D;
      }
      .tab-select-select{
        width: 60rpx;
      }
    }
    //动态列表
    .content-list{
      padding: 0 30rpx 30rpx 30rpx;
    }

    @keyframes tabCard-loading {
      from {margin-top:380rpx;}
      to {margin-top:0rpx;}
    }
    .tabCard{
      animation: tabCard-loading 1s;
    }

    //悬浮按钮
    .suspension{
      position: fixed;
      bottom: 160rpx;
      right: 50rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .back-top{
        width: 80rpx;
        height: 80rpx;
        background-color: #ffffff;
        border-radius: 50%;
        //margin-left: 10rpx;
      }
      .publish{
        margin-top: 20rpx;
        width: 100rpx;
        height: 100rpx;
        background-color: #ffffff;
        border-radius: 50%;
      }
    }
    .publish-pop-body{
      @keyframes show {
        from {height:0rpx;}
        to {height:300rpx;}
      }
      .publish-button{
        width: 100%;
        background-color: rgb(244, 244, 244);
        position: fixed;
        bottom:0;
        overflow: hidden;
        z-index: 400;
        transition: 2s;
        animation: show 0.5s;
        /* 弹框动画效果 */
        .publish-button-close{
          background-color: #ffffff;
          font-size: 32rpx;
          height: 90rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          &>image{
			      cursor: pointer;
            width: 60rpx;
            height: 60rpx;
			      &:active {
			      background-color: green;
			      }
          }
        }
        .publish-button-list{
          display: flex;
          align-items: center;
          margin-left: 40rpx;
          margin-right: 40rpx;
          height: 210rpx;
          &>view{
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            &:active {
              background-color: #6F6F6F;
            }
          }
        }
      }
      .publish-model{
        background: rgba(0, 0, 0, 0.6);
        position: absolute;
        z-index: 350;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        overflow: hidden;
      }
    }
  }
</style>
